<template>
  <div class="login-container">
    <video muted="muted" src="../../assets/video/bg-video.d2d602a9.mp4" class="video" loop="loop" autoplay="autoplay"></video>
    <div class="bj"></div>
    <!-- 常规登入 -->
      <el-form :v-model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="100px" class="login-loginForm">
        <h1 class="title">123</h1>
        <i class="jiaobiao iconfont  icon-jiaobiao"></i>


        <!-- 常规登入 -->
        <commonLogin @syncLoginForm="handleSyncLoginForm" @submit="submit"></commonLogin>

        <!-- 二维码登入 -->
        <!-- <qrLogin></qrLogin> -->

        <!-- 手机号登入 -->
        <!-- <smsLogin></smsLogin> -->
      </el-form>
  </div>
</template> 

<script>
import commonLogin from "./commonLogin.vue"
import qrLogin from "./qrLogin.vue"
import smsLogin from "./smsLogin.vue"
      //效验验证码
      var validateCaptcha = (rule, value, callback) => {
         if(value.length === 5){
            callback();
          }else{
            callback("请正确输入验证码")
          }
      };
      //效验用户名
      var validateUsername = (rule, value, callback) => {
        // console.log(rule);
        // console.log(value);
        //用户名正则，3到16位（字母数字下划线和减号）
        let uPattern = /^[a-zA-Z0-9_-]{3,16}$/;
        // 如果校验通过要直接回调callback()
        // 如果校验不通过 callback中传参数
        if(uPattern.test(value)){
          callback()
        } else {
          callback('3到16位字母数字下划线和减号')
        }
      };
      //效验密码
      var validatePassword = (rule, value, callback) => {
         // let pwd = value("请出入密码")
         // 密码至少包含 数字和英文，长度3-20
          let pwdPattern = /[0-9A-Za-z]{3,16}$/;
        
          if (pwdPattern.test(value)){
            callback()
          } else {
            callback('密码长度3-20 包含 数字和英文')
          }
      };

  export default {
     data() {     
      return {
        loginForm: {
          username: '',
          password: '',
          captcha: ''
        },
        rules: {
          username: [
            { validator: validateUsername, trigger: 'blur' }
          ],
          password: [
            { validator: validatePassword, trigger: 'blur' }
          ],
          captcha: [
            { validator: validateCaptcha, trigger: 'blur' }
          ]
        }
      };
    },
    components:{
        commonLogin,
        qrLogin,
        smsLogin
    },
    methods: {
      //表单提交
      submit() {
        this.$refs['loginForm'].validate((valid) => {
          if (valid) {
            //本地校验通过
            alert('submit!');
          } else {
            //本地校验不通过
            console.log('error submit!!');
            return false;
          }
        });
      },
      handleSyncLoginForm(newLoginForm){
        // console.log(newLoginForm)
        this.loginForm=newLoginForm
      },
    }
  }
</script>
<style scoped lang="less">

  .video{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .bj{
    background-image: url("../../assets/img/bg2.fc58c850.png");
    background-repeat: no-repeat;
    position: fixed;
    width: 20%;
    height: 40%;
    background-size: 100% 100%;
    left: 20%;
    top: 40%;
    opacity: .5;
}
   .login-container {
      text-align: center;
      color: #fff;
   }
    .el-form {
		position: fixed;
		right: 10%;
		top: 25%;
		border-radius: 5px;
		width: 400px;
		background-color: rgba(0, 0, 0, 0.3);
		padding: 100px 0 50px 0;
  }
  .title {
            margin: 0 0 60px 0;
            text-align: center;
            color: #fff;
        }
  .jiaobiao{
    font-size: 60px;
    color: #fff;
    position: absolute;
    right: -1px;
    top: -1px;
    cursor: pointer;
    opacity: 0.7;
  }
</style>